<!doctype html>    <!--视频课程>课程分类>课程列表>对应课程-->
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/common.css">
</head>
<body>
<!-- 顶部-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">长乐未央</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="categories.html">视频课程 <span class="sr-only">(current)</span></a></li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请填写搜索的课程">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<div class="container">
    <div class="page-header">
        <h1 class="course_name"></h1>
    </div>

    <img src="" class="img-responsive course_img" alt="Responsive image">

    <p class="lead">
        CSS的全名是层叠样式表。官方的解释，我就不细说了，因为就算细说了，对新手朋友们来说，听得还是一脸懵逼。那我们就用最通俗的说法来讲，到底啥是CSS？

        如果说HTML就是做房子的搭建好的钢筋结构，那么CSS就是做装修。

        爱美之心，人皆有之。话说亚洲呢，有三大神术，韩国的整容术、日本的化妆术、还有咱们中国的 PS
        术。我们上次学习了HTML基础课程，单纯只用那些标签做出来的东西，确实是非常简陋的。你想让它变得好看，那么对于我们程序员来说，也有一种神术，这就是CSS技术了。
    </p>

    <ul class="list-group">



    </ul>
</div>

<script src="vendor/jquery-3.6.0.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script>
    $(function () {
        var listId = localStorage.listId;
        $.get("https://clwy.cn/video/api/v2/courses/" + listId + ".json", function (data) {
           /* console.log(data);
            console.log(data.course.name);*/
            $('.course_name').html(data.course.name);
            $('.course_img').attr('src', data.course.image);  //设置属性
            $('.lead').html(data.course.body_html);

            var html = ''
            $.each(data.chapters, function (index, value) {
                html+=' <li class="list-group-item">\n' +
                    '            <a href="javascript:;" data-id="'+value.id+'">'+value.title+
                    '            </a>\n' +
                    '        </li>'

            })
            $('.list-group').html(html);

            $(document).on('click','.list-group-item a',function (){
                var courseId=$(this).data('id');
                localStorage.courseId=courseId;
                location.href='chapters.html'

            })


        })




    })
</script>

</body>
</html>

